<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>院校详情页</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
    <link rel="stylesheet" href="majorStyle.css">
</head>

<body id="page-top">
<div id="app">

    <!-- 固定导航栏 -->
    <div class="container">
        <div class="row nav upnav">
            <div class="col-lg-4"><h1><div style="font-family: 'Arial'; color: black">山东省高考志愿系统</div></h1></div>
            <div class="col lg-4"></div>

        </div>
        <div class="row nav botnav">
            <div class="col-lg-2"></div>
            <div class="col-lg-8  row">
                <div class="col-lg-2">
                    <a href="../index.html">
                        首页
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="../universities.html" style="font-weight: bold; color: rgb(57, 83, 131);">
                        院校查找
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="majors.html">
                        专业查找
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="../ranking.html">
                        志愿推荐
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="../ranking.html">
                        大学排行
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="javascript:;" @click="toAdmin()">
                        管理员
                    </a>
                </div>
            </div>
        </div>
    </div>
    

    <div id="wrapper">
        
        <div class="d-flex flex-column" id="content-wrapper">
            <div id="content">
                <div class="container">
                    
                    <div class="majorHeader" style="margin-top: 30px;">
                        
                        <div class="row">
                            <div class="col-lg-2"><img :src="'../img/'+college.logo" class="majorImg" style="padding-left: 30px; width: 150px"></div>
                            <div class="col-lg-8 row">
                                <div class="col-lg-12">
                                    <div class="majorName">{{college.name}}</div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="majorTags">
                                        <span class="majorTag">公立院校</span>
                                        <span class="majorTag">{{college.type}}</span>
                                        <span class="majorTag">{{college.level}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <button style="border: 0px; margin-top: 40px; padding: 10px; border-radius: 10px"
                                        class="btn-primary" @click="window.location.href=college.website">进入官网</button>
                            </div>
                        </div>
                        
                    </div>
                    <div class="row" style="margin-top: 30px;">
                        <div class="col-md-11" style="margin-left: 50px;">
                            <div class="card" style="margin-top: 30px;">
                                <div class="card-header">
                                    <h5 class="mb-0" style="color: black; font-size: 25px;">学校介绍</h5>
                                </div>
                                <div class="card-body">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <nav class="navbar navbar-light navbar-expand-md">
                                                <div class="container-fluid">
                                                    <div class="collapse navbar-collapse" id="navcol-3">
                                                        {{college.describes}}
                                                    </div>
                                                </div>
                                            </nav>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card" style="margin-top: 30px;">
                                <div class="card-header">
                                    <h5 class="mb-0" style="color: black; font-size: 25px;">师资介绍</h5>
                                </div>
                                <div class="card-body">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <nav class="navbar navbar-light navbar-expand-md">
                                                <div class="container-fluid">
                                                    <div class="collapse navbar-collapse" id="navcol-3">
                                                        {{college.teachers}}
                                                    </div>
                                                </div>
                                            </nav>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card" style="margin-top: 30px;">
                                <div class="card-header">
                                    <h5 class="mb-0" style="color: black; font-size: 25px;">专业录取情况</h5>
                                </div>
                                <div class="card-body">
                                    <ul class="list-group">
                                        <table  class="table table-borderd table-striped table-hover" style="color: rgb(85, 85, 85);">
                                            <thead>
                                            <tr>
                                                <th>专业名称</th>
                                                <th>最低录取分数线</th>
                                                <th>平均录取分数线</th>
                                                <th>科目要求</th>
                                                <th>录取人数</th>
                                                <th>专业介绍</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="collegeMajor in collegeMajors">
                                                    <td v-text="collegeMajor.mname"></td>
                                                    <td v-text="collegeMajor.lowest"></td>
                                                    <td v-text="collegeMajor.average"></td>
                                                    <td v-text="collegeMajor.type"></td>
                                                    <td v-text="collegeMajor.number"></td>
                                                    <td>
                                                        <a href="#">查看详情</a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </ul>
                                </div>
                            </div>
                            <div class="card" style="margin-top: 30px;">
                                <div class="card-header">
                                    <h5 class="mb-0" style="color: black; font-size: 25px;">学校重点专业</h5>
                                </div>
                                <div class="card-body">
                                    <ul class="list-group">
                                        <table  class="table table-borderd table-striped table-hover" style="color: rgb(85, 85, 85);">
                                            <thead>
                                            <tr>
                                                <th>专业名称</th>
                                                <th>最低录取分数线</th>
                                                <th>平均录取分数线</th>
                                                <th>科目要求</th>
                                                <th>录取人数</th>
                                                <th>专业介绍</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="collegeMajor in emphasisedMajors">
                                                <td v-text="collegeMajor.mname"></td>
                                                <td v-text="collegeMajor.lowest"></td>
                                                <td v-text="collegeMajor.average"></td>
                                                <td v-text="collegeMajor.type"></td>
                                                <td v-text="collegeMajor.number"></td>
                                                <td>
                                                    <a href="#">查看详情</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </ul>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
            
<!-- footer -->
            <div class="footer container">
                <div class="footertext">
                    <div>项目经理: 李永琪</div>
                    <div>邮箱: 1250025948@qq.com</div>
                    <div>团队成员: 王兴胜 周经纬 刘宇航</div>
                </div>
            </div>

        </div><a class="border rounded d-inline scroll-to-top" href="#page-top"><i class="fas fa-angle-up"></i></a>
    </div>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/theme.js"></script>
</div>
</body>

</html>

<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            college:{},
            collegeMajors:[],
            emphasisedMajors:[],
            id:""
        },
        methods:{
            queryCollegeById(id){
                const _this = this;
                axios.get("http://localhost:8080/colleges/queryCollegeById?id="+id).then((res)=>{
                    console.log(res.data)
                    _this.college = res.data;
                });
            },
            queryEmphasised(id){
                const _this = this;
                axios.get("http://localhost:8080/college/queryEmphasisedByCid?cid="+id).then((res)=>{
                    console.log(res.data)
                    _this.emphasisedMajors = res.data;
                });
            },
            queryAllMajors(id){
                const _this = this;
                axios.get("http://localhost:8080/college/queryAllMajorsByCollege?cid="+id).then((res)=>{
                    console.log(res.data)
                    _this.collegeMajors = res.data;
                });
            },
            toAdmin(){
                if(window.localStorage.getItem("role") === 'administrator') location.href='../admin/user.html';
                else alert("非管理员 无授权进入管理员界面!")
            }
        },
        created(){
            if(window.localStorage.getItem("online")!=="on"){
                window.location='login.html';
            }else{
                this.id = location.href.substring(location.href.indexOf("=")+1);
                this.queryCollegeById(this.id);
                this.queryEmphasised(this.id);
                this.queryAllMajors(this.id);
            }
        }
    })
</script>